<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>ADMIN</title>
    <link rel="stylesheet" href="./css/admin/base.css">
    <link rel="stylesheet" href="./css/admin/app.css">
    <style>
        .success {
            color: #18da18;
        }

        .fail {
            color: gray;
        }
    </style>
</head>

<body>
    <div class="app-content">
        <div class="page-header">
            <div class="title">通用列表</div>
        </div>

        <!-- 过滤器 -->
        <form class="filter">
            <div class="filter-item">
                <div class="form-item">
                    <select name="select">
                        <option value="">选项一</option>
                        <option value="">选项二</option>
                    </select>
                </div>
            </div>
            <div class="filter-item">
                <div class="form-item">
                    <input type="text" placeholder="请输入查询关键字" name="keyword">
                </div>

            </div>

            <!-- 选项切换 -->
            <div class="j-option-switch filter-item">
                <div class="option form-item">
                    <select name="searchType" class="select" data-content-selector=".search">
                        <option value="default">全部</option>
                        <option value="merchCode">机器编码</option>
                        <option value="ip">IP地址</option>
                        <option value="mac">mac地址</option>
                        <option value="onlineStatus">在线状态</option>
                    </select>
                </div>
                <div class="content z-mal">

                </div>
            </div>

            <button class="z-btn z-primary">查询</button>
        </form>

        <!-- 关联的选项 -->
        <div class="search z-hide">
            <div>
                <div class="form-item">
                    <input type="text" placeholder="请输入查询关键字" name="keyword2">
                </div>
            </div>
            <div>
                <div class="form-item">
                    <input type="text" placeholder="请输入查询机器编码" name="merchCode">
                </div>
            </div>
            <div>
                <div class="form-item">
                    <input type="text" placeholder="请输入查询IP地址" name="ip">
                </div>
            </div>
            <div>
                <div class="form-item">
                    <input type="text" placeholder="请输入查询MAC地址" name="mac">
                </div>
            </div>
            <div>
                <div class="form-item">
                    <select name="onlineStatus">
                    <option value="">所有</option>
                    <option value="0">在线</option>
                    <option value="1">离线</option>
                </select>
                </div>
            </div>
        </div>
        <!-- 关联的选项 End -->

        <table class="z-table ">
            <thead>
                <th></th>
                <th>
                    <input type="checkbox" class="j-checkbox-all">
                </th>
                <th>#</th>
                <th>文件名</th>
                <th>版本号</th>
                <th>发布</th>
                <th class="z-center ">校验状态</th>
                <th class="z-center ">下载状态</th>
                <th>终端数量</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr>
                    <td colspan="9 " class="z-center ">暂无数据</td>
                </tr>
                <tr>
                    <td class="btn-expand z-center ">
                        <i class="fa fa-angle-right "></i>
                    </td>
                    <td>
                        <input type="checkbox" class="j-checkbox">
                    </td>
                    <td>1868</td>
                    <td>15001_广州_20180303.json</td>
                    <td>CCAB0B34D27DBA87EB49F688AF0AF03E</td>
                    <td>当前发布</td>
                    <td class="z-center" style="color: #18da18;">
                        <i class="fa fa-check"></i>
                    </td>
                    <td class="z-center" style="color: #18da18;">
                        <i class="fa fa-check"></i>
                    </td>
                    <td>10</td>
                    <td class="btn-group ">
                        <a href="./发布管理-节目-详情.html " class="layer-open " data-title="节目详情 ">详情</a>
                    </td>
                </tr>
                <tr class="expand-info ">
                    <td></td>
                    <td colspan="8 ">
                        <li>发布时间：2018-03-07 15:09:16</li>
                    </td>
                </tr>

                <tr>
                    <td class="btn-expand z-center ">
                        <i class="fa fa-angle-right "></i>
                    </td>
                    <td>
                        <input type="checkbox" class="j-checkbox">
                    </td>
                    <td>1868</td>
                    <td>15001_广州_20180303.json</td>
                    <td>CCAB0B34D27DBA87EB49F688AF0AF03E</td>
                    <td>当前发布</td>
                    <td class="z-center" style="color: #18da18;">
                        <i class="fa fa-check"></i>
                    </td>
                    <td class="z-center" style="color: #18da18;">
                        <i class="fa fa-check"></i>
                    </td>
                    <td>10</td>
                    <td class="btn-group ">
                        <a href="./发布管理-节目-详情.html " class="layer-open " data-title="节目详情 ">详情</a>
                    </td>
                </tr>
                <tr class="expand-info ">
                    <td></td>
                    <td colspan="8 ">
                        <li>发布时间：2018-03-07 15:09:16</li>
                    </td>
                </tr>

                <tr>
                    <td class="btn-expand z-center ">
                        <i class="fa fa-angle-right "></i>
                    </td>
                    <td>
                        <input type="checkbox" class="j-checkbox">
                    </td>
                    <td>1868</td>
                    <td>15001_广州_20180303.json</td>
                    <td>CCAB0B34D27DBA87EB49F688AF0AF03E</td>
                    <td>历史发布</td>
                    <td class="z-center" style="color: #gray;">
                        <i class="fa fa-close"></i>
                    </td>
                    <td class="z-center" style="color: #gray;">
                        <i class="fa fa-close"></i>
                    </td>
                    <td>9</td>
                    <td class="btn-group ">
                        <a href="./发布管理-节目-详情.html " class="layer-open" data-title="节目详情">详情</a>
                    </td>
                </tr>
                <tr class="expand-info ">
                    <td></td>
                    <td colspan="8 ">
                        <li>发布时间：2018-03-07 15:09:16</li>
                    </td>
                </tr>

            </tbody>
        </table>

        <!-- 分页 -->
        <div class="z-page z-pat z-fr">
            <span class="active ">1</span>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#" class="last">尾页</a>
            <a href="#" class="next">下一页</a>
        </div>
    </div>

    <script src="lib/jquery.min.js "></script>
    <script src="lib/layer-v3.1.1/layer/layer.js "></script>
    <script src="js/form.js"></script>
    <script src="js/admin/app.js "></script>
    <script>
        // 从URL加载搜索数据
        $(".filter").formLoad(App.query);

        // 加载select联动内容
        $('[name="searchType"] option').each(function(index, element) {
            if (element.selected == true) {
                $('.j-option-switch .content').html($(".search").children('div').eq(index).html())
            }
        })
    </script>
</body>

</html>